import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    tasklist: [
      { id: 100, name: "吃饭", isDone: true },
      { id: 101, name: "睡觉", isDone: false },
      { id: 102, name: "打豆豆", isDone: true },
    ],
    taskStatus: 'all'
  },
  mutations: {
    addTask(state, task) {
      state.tasklist.push(task)
    },
    delTask(state, index) {
      state.tasklist.splice(index, 1)
    },
    taskStatusToYes(state) {
      state.taskStatus = 'yes'
    },
    taskStatusToNo(state) {
      state.taskStatus = 'no'
    },
    taskStatusToAll(state) {
      state.taskStatus = 'all'
    },
    delYestask(state) {
      state.tasklist = state.tasklist.filter(item => !item.isDone)
    }

  },
  actions: {
    
  },
  getters: {
    taskStatusList(state) {
      if (state.taskStatus === 'yes') {
        return state.tasklist.filter(item => item.isDone)
      } else if (state.taskStatus === 'no') {
        return state.tasklist.filter(item => !item.isDone)
      } else {
        return state.tasklist
      }
    }
  },
  modules: {
    
  },
  plugins: [createPersistedState({
    key: 'myTodo',
    paths:['tasklist']
  })]
})
export default store